<template>
  <div
    class="price"
    :class="[
      `${market ? 'market-price' : ''}`,
      `${fw && !market ? 'fw' : ''}`,
      `${size && !market ? size : 'fz-small-x'}`,
    ]"
  >
    <span class="price-icon" :class="[`${market ? 'market-icon' : ''}`]"
      >￥</span
    >
    <span>{{ value }}</span>
  </div>
</template>
<script lang="ts">
export default {
  name: "money",
};
</script>
<script lang="ts" setup>
import { ref } from "vue";

const props = withDefaults(
  defineProps<{
    value?: number | string;
    color?: string;
    size?:
      | "fz-small-x"
      | "fz-small"
      | "fz-default"
      | "fz-large"
      | "fz-large-x"
      | "fz-large-xx";
    fw?: boolean;
    market?: boolean;
  }>(),
  {
    value: 0.0,
    color: "",
    size: "fz-default",
    fw: false,
    market: false,
  }
);
</script>

<style scoped>
.price {
  position: relative;
  /* display: flex;
  align-items: baseline; */
  color: var(--base-red);
}
.price-icon {
  font-size: 65%;
}

.market-price {
  position: relative;
  color: var(--base-grey);
  display: inline-block;
  align-items: baseline;
}
.market-price::after{
  position: absolute;
  content: "";
  width: 90%;
  height: 1rpx;
  background:var(--base-grey);
  top: 49.5%;
  left: 5%;
}

.market-icon {
  font-size: 70%;
}
</style>